import React from "react";
import {Form, Input, Button, message} from 'antd';
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import './Login.css'
import axios from "axios";
// import Particles from "react-particles-js";
export default function Login(props) {
    console.log(props)
    const onFinish = async (values) => {
        // console.log(values)
        let res = await axios.get(`http://localhost:5000/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`)
        if (res.data.length === 0) {
            message.error("wrong user or password")
        } else {
            localStorage.setItem("token", JSON.stringify(res.data[0]))
            props.history.push('/')
        }
    }
    return (
        <div style={{background: 'rgba(35,39,65)', height: "689px"}}>
            {/*<Particles/>*/}
            <div className={"formContainer"}>
                <div className={"loginTitle"}>登录界面</div>
                <Form
                    name="normal_login"
                    className="login-form"
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{required: true, message: 'Please input your Username!'}]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="Username"/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{required: true, message: 'Please input your Password!'}]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon"/>}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}
